<!DOCTYPE html>
<html>
  <head>
    <!-- 分组 -->
    <!-- <script src="node_modules/three/build/three.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "three": "./node_modules/three/build/three.module.js",
          "three/addons/": "./node_modules/three/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";

      // 引入dat.gui.js的一个类GUI
      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
      // 浏览器控制台测试，是否引入成功
      console.log(THREE.Scene);
      console.log("完成");
      const width = window.innerWidth;
      const height = window.innerHeight;

      // 开始创建
      // 设置场景,坐标原点 0，0，0 中场景中央
      const scene = new THREE.Scene();

      // 点光源
      const pointLight = new THREE.PointLight(0xffffff, 1.0);
      scene.add(pointLight);
      pointLight.position.set(500, 500, 600);

      const group1 = new THREE.Group();
      group1.name = "零件";

      const boxGeo = new THREE.BoxGeometry(20, 10, 20); // 长方体
      const boxMaterial = new THREE.MeshLambertMaterial({
        color: 0x0fff0e, //材质颜色
      });

      const boxMesh = new THREE.Mesh(boxGeo, boxMaterial);
      boxMesh.position.set(0, 0, 0);
      boxMesh.name = "帽";

      group1.add(boxMesh);

      // 再做个圆柱

      const cylinderGeo = new THREE.CylinderGeometry(5, 5, 50);
      const cylinderMaterial = new THREE.MeshLambertMaterial({
        color: 0xff000e, //材质颜色
      });

      const cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMaterial);
      cylinderMesh.position.set(0, 30, 0);
      cylinderMesh.name = "杆";

      group1.add(cylinderMesh);

      scene.add(group1);

      //父对象旋转，子对象跟着旋转
      group1.rotateZ(Math.PI / 6);

      const worldPosition = new THREE.Vector3();
      // 获取mesh的世界坐标，你会发现mesh的世界坐标受到父对象group的.position影响
      cylinderMesh.getWorldPosition(worldPosition);
      console.log("世界坐标", worldPosition);
      console.log("本地坐标", cylinderMesh.position);

      //可视化mesh的局部坐标系，参数是坐标轴的长度
      const meshAxesHelper = new THREE.AxesHelper(50);
      cylinderMesh.add(meshAxesHelper);

      // 查看杆的颜色
      const pole = scene.getObjectByName("杆");
      console.log(`杆的颜色`, pole.material.color);

      // 这个移动，是移动相对坐标，就是局部坐标
      cylinderMesh.geometry.translate(50/2,0,0);

      // 移除，和添加相对,然后就看不见了
      // group1.remove(pole);

      // visible，是否可见，改成 false 就是隐藏
      // pole.visible= false;

      // 还可以隐藏材质，还是看不见
      //pole.material.visible= false;

      const camera = new THREE.PerspectiveCamera(50, width / height, 10, 1000);

      // 设置摄像机的位置
      camera.position.set(40, 7, 150);

      // 设置摄像机的观察点
      camera.lookAt(0, 20, 0);

      // 摄像机从 x -12 向 x 0 方向观察
      console.log(`camera`, camera.position);

      // 设置渲染器
      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(width, height);

      // 设置空间背景颜色
      renderer.setClearColor(0xcccccc);
      renderer.render(scene, camera);

      document.body.appendChild(renderer.domElement);

      // 渲染方法
      function render() {
        // 用渲染器渲染
        renderer.render(scene, camera);

        // 重复渲染，需要查一下
        // 请求动画帧
        // requestAnimationFrame实现周期性循环执行
        // requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能
        requestAnimationFrame(render); // 请求再次执行函数render, 放上面下面都行
      }

      // 执行渲染方法
      render();
    </script>
  </head>
  <body>
    GUI 控件
    <div id="monitor"></div>
  </body>
</html>
